<template>
	<view class="goods-list">
		<goods-list :goods="goods" @goGoodsDetail="goGoodsDetail"></goods-list>
		<view class="isOver" v-if="isOver">
			----------已经加载全部商品-------------
		</view>
	</view>
</template>

<script>
	import GoodsList from '../../components/goodsList/GoodsList.vue'
	export default {
		data() {
			return {
				goods: [],
				isOver: false
			}
		},
		components:{
			GoodsList
		},
		onLoad(){
			this.getGoodsList()
		},
		onReachBottom() {
			// console.log('触底')
			if(this.goods.length > 30){
				return this.isOver = true
			}
			this.getGoodsList()
		},
		onPullDownRefresh() {
			this.goods = []
			this.isOver = false
			setTimeout(() => this.getGoodsList(uni.stopPullDownRefresh) , 300)
		},
		methods: {
			// 获取商品列表数据
			async getGoodsList(callback){
				const res = await this.$myRequest({
					url: "getHotGoods.json"
				})
				this.goods = [...this.goods,...res.data.message.goods]
				callback && callback()
			},
			goGoodsDetail(id) {
				uni.navigateTo({
					url:"/pages/goodsDetail/GoodsDetail?id=" + id
				})
			}
			
		}
	}
</script>

<style lang="scss">
	.goods-list {
		background-color: #eee;
	}
	.isOver {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		font-size: 30rpx;
	}
</style>
